Modernizing the Pinterest carousel: 90% less code with native CSS

youtube
Modernizing the Pinterest carousel: 90% less code with native CSS How do you build a web that inspires 600 million users? At Pinterest, the "Close Up" experience is core to how users discover ideas. But over time, the JavaScript powering carousel experience became a patchwork of 2,000 lines of code—resulting in noticeable lag and "jank" for users. In this video, Pinterest engineers Calvin and Anuja walk through how they swapped legacy JavaScript for modern CSS carousels and View Transitions. The results? A 90% reduction in code, a 15% improvement in page load time, and a smoother, native-feeling UI. Chapters: [0:07] Inspiring 600 Million Users [0:10] Meet the team: Engineering at Pinterest [0:21] The legacy carousel: 2,000 Lines of JavaScript [0:49] The Experiment: Converting to CSS carousel [1:22] Results: 90% less code, 15% less load time. [1:36] Scaling success everywhere [2:03] View Transitions: Smooth animations are now possible 📚Resources: Make accessible carousels → Carousels with CSS → Scoped View Transitions → View Transition API → Watch more “Re-Imagine the web” → Subscribe to Chrome for Developers → #Chrome #Pinterest #webui Products Mentioned: Chrome, Pinterest, web platform, web development, CSS, CSS carousels, CSS primitives, View Transitions
  2026/03/17      youtube

Our Tag

最近投稿されたプログラミング学習動画

You're likely missing out on agent skills true potential!

Agent skills are truly useful. Yes, just...

  2026/03/25

A great novel can be written in any language - just like great program

A great novel can be written in any lang...

  2026/03/25

Deploying AI Models with Hugging Face – Hands-On Course

This tutorial is a comprehensive, end-to...

  2026/03/25

Have you ever heard of G-Code? Here's a quick explainer of what it is.

Have you ever heard of G-Code? Here's a ...

  2026/03/24

Google Pixel 10 Pro | With 100x Zoom

Google
Zoom

#Pixel10 Pro brings Google’s most advanc...

  2026/03/23

Google Pixel 10 | Moving on

Google

Keeping a device that doesn't keep up? #...

  2026/03/23

LLMs haven't really gotten "smarter" - but the tools we use with them

LLMs haven't really gotten "smarter" - b...

  2026/03/23

Claude Code Essentials

Learn how to use Claude Code to build re...

  2026/03/23

How To Build WhatsApp AI Agent Using n8n | WhatsApp Automation With n8

🔥Generative AI, Machine Learning, And In...

  2026/03/22

Learn Prompt Engineering In 7 Days | Prompt Engineering Roadmap For Be

🔥Generative AI, Machine Learning, And In...

  2026/03/22

Performance Marketing Full Course 2026 | Performance Marketing Tutoria

Marketing

🔥AI-Powered Digital Marketing Certificat...

  2026/03/22

Data Architect Roadmap 2026 | How To Become A Data Architect In 2026 |

🔥Generative AI, Machine Learning, And In...

  2026/03/22

DevOps Engineer Full Course 2026 | Learn DevOps In 24 Hours | DevOps T

Devops

This video on DevOps Engineer Full Cours...

  2026/03/22

Tableau Full Course 2026 [FREE] | Tableau Tutorial For Beginners | Tab

🔥Data Analyst Masters Program (Discount ...

  2026/03/22

Learn how to set a scene in Three.js

Learn how to set a scene in Three.js...

  2026/03/22